<template>
  <el-dialog
    top="10vh"
    width="850px"
    title="添加/编辑"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <SubmitForm
      :rule-form="ruleForm"
      :rules="rules"
      :form-list="formList"
      @change="handleFormChange"
      @save="onSave"
      @close="dialogValue = false"
    >
      <template v-slot:applyDate>
        <el-button type="text" @click="addApplyDate"  v-if="ruleForm.applyDate.length === 0">添加</el-button>
        <el-row v-for="(item,index) in ruleForm.applyDate" :gutter="12">
          <el-col :span="5">
            <el-form-item label="标签" prop="type">
              <el-input v-model="item.type"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="申请开始时间" prop="start_time">
              <el-date-picker
                  v-model="item.start_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="申请结束时间" prop="end_time">
              <el-date-picker
                  v-model="item.end_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="item.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div style="padding-top:32px;padding-left: 12px">
              <el-button type="text" @click="addApplyDate(index)"  v-if="index === ruleForm.applyDate.length - 1">添加</el-button>
              <el-button type="text" style="color: #F82222" @click="delApplyDate(index)" v-if="index">删除</el-button>
            </div>
          </el-col>
        </el-row>
      </template>
    </SubmitForm>

  </el-dialog>
</template>

<script>
import { http } from '@/api'
export default {
  name: 'FormAdd',
  data() {
    return {
      apiKey: 'major',
      dialogValue: false,
      ruleForm: {
        applyDate: []
      },
      defaultForm: {
        lang: 'zh',
        major_code: '',
        major: '',
        major_short: '',
        school_id: '',
        college: '',
        field: '',
        min_length: 0,
        max_length: 0,
        tuition: 0,
        description: '',
        apply_frequency: 0,
        bachelor_degree: '',
        work_experience: '',
        ielts: '',
        toefl: '',
        us_graduate: '',
        is_need_interview: 0,
        sort: 1,
        status: 1,
        applyDate: [
        ],
        courseList: [

        ]
      },
      rules: {
        lang: [{ required: true, message: '不能为空' }],
        major_code: [{ required: true, message: '不能为空' }],
        major: [{ required: true, message: '不能为空' }],
        school_id: [{ required: true, message: '不能为空' }],
      },
      formList: [
        {
          name: 'select',
          label: '语言',
          prop: 'lang',
          clearable: false,
          options: [
            {
              label: '中文',
              value: 'zh'
            },
            {
              label: '英文',
              value: 'en'
            }
          ],
          colSpan: 24
        },
        {
          name: 'input',
          label: '专业编码',
          prop: 'major_code',
          colSpan: 8
        },
        {
          name: 'input',
          label: '专业名称',
          prop: 'major',
          colSpan: 8
        },
        {
          name: 'input',
          label: '专业简称',
          prop: 'major_short',
          colSpan: 8
        },
        {
          name: 'select',
          label: '学校',
          prop: 'school_id',
          options: [
          ],colSpan: 12
        },
        {
          name: 'input',
          label: '院系',
          prop: 'college',
          colSpan: 12
        },
        {
          name: 'input',
          label: '领域',
          prop: 'field',
          colSpan: 12
        },
        {
          name: 'input',
          label: '学制（最短）',
          prop: 'min_length',
          type: 'number',
          colSpan: 12
        },
        {
          name: 'input',
          label: '学制（最长）',
          prop: 'max_length',
          type: 'number',
          colSpan: 12
        },
        {
          name: 'select',
          label: '是否接受Part-time',
          prop: 'is_part_time',
          options: [
            {
              label: 'Y',
              value: 1
            },
            {
              label: 'N',
              value: 0
            }
          ],
          colSpan: 12,
        },

        {
          name: 'input',
          label: '学费',
          prop: 'tuition',
          type: 'number',
          colSpan: 12
        },
        {
          name: 'input',
          label: '专业介绍',
          prop: 'description',
          type: 'textarea',
          colSpan: 24
        },
        {
          key: 'applyDateTitle',
          name: 'title',
          label: '申请时间',
          colSpan: 24
        },
        {
          name: 'input',
          label: '申请频次（每年）',
          prop: 'apply_frequency',
          colSpan: 6
        },
        {
          name: 'input',
          label: '',
          prop: 'applyDate',
          colSpan: 24,
          slot: true
        },
        {
          key: 'applyCondition',
          name: 'title',
          label: '申请条件',
          colSpan: 24
        },
        {
          name: 'input',
          label: '本科学历',
          prop: 'bachelor_degree',
          colSpan: 12,
          type: 'textarea',
        },
        {
          name: 'input',
          label: '工作经验',
          prop: 'work_experience',
          colSpan: 12,
          type: 'textarea',
        },
        {
          name: 'input',
          label: '雅思',
          prop: 'ielts',
          colSpan: 12
        },
        {
          name: 'input',
          label: '托福',
          prop: 'toefl',
          colSpan: 12
        },
        {
          name: 'input',
          label: '美国研究生入学考试(Graduate Record Examination)',
          prop: 'us_graduate',
          colSpan: 24,
          type: 'textarea',
        },
        {
          name: 'select',
          label: '是否需要面试',
          prop: 'is_need_interview',
          options: [
            {
              label: 'Y',
              value: 1
            },
            {
              label: 'N',
              value: 0
            }
          ],
          colSpan: 12,
        },
        {
          prop: 'status',
          name: 'switch',
          label: '状态',
          colSpan: 12,
          activeValue: 1,
          inactiveValue: 0
        },
      ]
    }
  },
  methods: {
    addApplyDate() {
      this.ruleForm.applyDate.push({
        start_time: '',
        end_time: '',
        type: '',
        remark:''
      })
    },
    delApplyDate(index) {
      this.ruleForm.applyDate.splice(index, 1)
    },
    handleFormChange({ key, val }) {

    },
    open(row) {
      console.log('row',row)
      this.dialogValue = true
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
      http.school.list().then(res => {
        this.formList.forEach(item => {
          if (item.prop === 'school_id') {
            item.options = res.data.map(s => {
              return {
                label: s.name,
                value: s.id
              }
            })
          }
        })
      })

    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, { ...this.ruleForm }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
